<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Tooltip 样式 | Flip</title>
		<!--<link rel="stylesheet" type="text/css" href="css/normalize.css" />-->
		<!--<link rel="stylesheet" type="text/css" href="css/demo.css" />-->
		<link rel="stylesheet" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="css/tooltip-flip.css" />
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<style>
			*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }



			.dummy {
				text-align: left;
				padding: 1em;
				min-height: 300px;
				margin: 0 auto;
				font-weight: 300;
			}

			.dummy-menu {
				max-width: 100%;
				padding: 4em 1em;
			}

			.dummy-menu ul,
			.dummy-team ul {
				list-style: none;
				text-align: center;
				padding: 0;
				margin: 0 0 3em;
			}

			.dummy-menu ul li {
				display: inline-block;
				position: relative;
				margin: 0 1em;
				font-size: 1.5em;
			}

			.dummy-menu ul li a {
				display: inline-block;
				font-weight: 700;
				padding: 0.15em 0.25em 0;
				-webkit-transition: color 0.3s;
				transition: color 0.3s;
			}

			.dummy-menu-icons ul li {
				width: 2em;
				height: 2em;
				font-size: 2em;
				line-height: 1.75;
			}
		</style>
	</head>
	<body class="color-8">
		<div class="container">
			<div class="content">
				<header class="codrops-header">
					<h1>Tooltip 样式 <span>展示各种样式的Tooltip效果</span></h1>	
					<nav class="codrops-demos">
						<a href="index.html">Classic</a>
						<a href="round.html">Round</a>
						<a href="curved.html">Curved</a>
						<a href="sharp.html">Sharp</a>
						<a href="bloated.html">Bloated</a>
						<a href="box.html">Box</a>
						<a href="comic.html">Comic</a>
						<a href="line.html">Line</a>						
						<a class="current-demo" href="flip.html">Flip</a>
					</nav>
				</header>
				<div class="dummy dummy-menu">
					<ul>
						<li>
							<a class="tooltip tooltip-effect-1" href="#">
								<i class="fa fa-fw fa-camera-retro"></i>
								<span class="tooltip-content">
									<span class="tooltip-front">
										<img src="img/user4.png" alt="user4"/>
									</span>
									<span class="tooltip-back">Sarah Cook</span>
								</span>
							</a>
						</li>
						<li>
							<a class="tooltip tooltip-effect-2" href="#"><i class="fa fa-fw fa-paint-brush"></i>
								<span class="tooltip-content">
									<span class="tooltip-front"><img src="img/user2.png" alt="user2"/></span>
									<span class="tooltip-back">Harry Belverde</span>
								</span>
							</a>
						</li>
						<li>
							<a class="tooltip tooltip-effect-3" href="#"><i class="fa fa-fw fa-file-text"></i>
								<span class="tooltip-content">
									<span class="tooltip-front"><img src="img/user3.png" alt="user3"/></span>
									<span class="tooltip-back">Zoe Shelton</span>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div><!-- /content -->
		</div><!-- /container -->
	</body>
</html>